<template>
  <el-dialog
    title="编辑"
    :visible.sync="dialogVisible"
    width="60%"
    :before-close="handleClose">
    <el-form
      ref="formRef"
      class="form_item_w1"
      :model="pageForm"
      label-width="120px"
    >
      <div>
        <div class="title-container">
          <div class="title">教学经历及特色</div>
        </div>
        <el-form-item label="教学经历：">
          <el-input type="textarea" v-model="pageForm.teachingExperience" placeholder="请输入教学经历" :disabled="disabled"></el-input>
        </el-form-item>
        <el-form-item label="个人特色：">
          <el-input type="textarea" v-model="pageForm.teachingFeatures" placeholder="请输入个人特色" :disabled="disabled"></el-input>
        </el-form-item>
      </div>
      <div>
        <div class="title-container">
          <div class="title">教学理念</div>
        </div>
        <el-form-item label="教育理念：">
          <div class="border-style">
            <div class="border-bg" v-if="isShow1">
              <div class="border-l">
                <img src="@/assets/teachingTenet/u2256.png" alt="收藏内容1" width="12px" height="12px">
                <div style="margin-left: 10px;">参考方向：立德树人、以学生为中心、能力本位、因材施教、创新驱动等方面</div>
              </div>
              <i class="el-icon-close" @click="handleHiddle(1)"></i>
            </div>
            <el-input type="textarea" v-model="pageForm.educationalPhilosophy" placeholder="请输入教学理念" :disabled="disabled"></el-input>
          </div>
        </el-form-item>
      </div>
      <div>
        <div class="title-container">
          <div class="title">教育宗旨</div>
        </div>
        <el-form-item label="目标日期：">
          <el-date-picker
            unlink-panels
            v-model="dateTime"
            type="daterange"
            range-separator="至"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            @change="(val) => changeDateRange(val)"
          />
        </el-form-item>
        <el-form-item label="目标：">
          <div class="border-style">
            <div class="border-bg" v-if="isShow2">
              <div class="border-l">
                <img src="@/assets/teachingTenet/u2256.png" alt="内容" width="12px" height="12px">
                <div style="margin-left: 10px;">参考方向：学科知识积累、技能熟练程度、品德素养塑造、学习方法培养、学习兴趣激发等方面</div>
              </div>
              <i class="el-icon-close" @click="handleHiddle(2)"></i>
            </div>
            <el-input type="textarea" v-model="pageForm.educationalGoals" placeholder="请输入目标" :disabled="disabled"></el-input>
          </div>
        </el-form-item>
      </div>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSubmit()" :loading="loading">确 定</el-button>
    </span>
  </el-dialog>
</template>
<script>
import { teachingTenetAddApi, teachingTenetEditApi, teachingTenetByIdApi } from '@/api/teachingIdea/teachingTenet'
export default {
  name: 'TheDetail',
  data() {
    return {
      pageForm: {
        teachingExperience:'',
        teachingFeatures:'',
        educationalPhilosophy:'',
        goalStartDate:'',
        goalEndDate:'',
        educationalGoals:''
      },
      dialogVisible: false,
      disabled: false,
      loading: false,
      isShow1: true,
      isShow2: true,
      dateTime: [],
      teachingTenetAddApi,
      teachingTenetEditApi,
      teachingTenetByIdApi,
      id:''
    };
  },
  methods: {
    handleOpen(id){
      if(id) {
        this.id = id;
        this.getById();
      }
      this.dialogVisible = true;
    },
    handleClose(done) {
      this.dialogVisible = false;
    },
    handleSubmit() {
      this.dialogVisible = false;
    },
    changeDateRange(value) {
      this.pageForm.goalStartDate = value ? value[0] : '';
      this.pageForm.goalEndDate = value ? value[1] : ''
    },
    handleHiddle(num){
      if(num === 1) this.isShow1 = false
      if(num === 2) this.isShow2 = false
    },

    async getById() {
      try {
        const { data } = await teachingTenetByIdApi(this.id);
        this.pageForm = Object.assign({}, this.pageForm, {
          teachingExperience:data.teachingExperience,
          teachingFeatures:data.teachingFeatures,
          educationalPhilosophy:data.educationalPhilosophy,
          goalStartDate:data.goalStartDate,
          goalEndDate:data.goalEndDate,
          educationalGoals:data.educationalGoals
        });
        this.dateTime = [
          this.pageForm.goalStartDate || '',  // 处理空值，避免 undefined
          this.pageForm.goalEndDate || ''
        ];
      } catch (error) {
        this.$message.error(error.message || '获取详情失败')
      }
    },

    async handleSubmit() {
      try {
        this.loading = true
        const api = teachingTenetAddApi
        const res = await api(this.pageForm)
        if (res.code === 200) {
          this.$emit('refresh')
          this.$message.success(res.msg)
          this.dialogVisible = false
        } else {
          this.$message.error(res.msg)
        }
      } catch (error) {
        this.$message.error(error.message || '操作失败')
      } finally {
        this.loading = false
      }
    }
  }
};
</script>
<style scoped lang="scss">
.title-container {
  padding-left: 12px;
  border-left: 3px solid #409eff;  /* 蓝色竖线样式 */
  margin-bottom: 10px;
}

.title{
  font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
  font-weight: 650;
  font-size: 16px;
  padding-left: 10px;
  color: #333333;
}
.border-style{
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  min-height: 100px;
  padding: 6px 10px;
  .border-bg{
    display: flex;
    justify-content: space-between;
    align-items: center;
    border: 1px solid #91D5FF;
    border-radius: 4px;
    background-color: #E6F7FF;
    height: 32px;
    padding: 0% 10px;
    .border-l{
      display: flex;
      align-items: center;
    }
  }
}

::v-deep .el-alert{
  padding: 4px 16px;
}
::v-deep .el-textarea{
  margin-top: 10px;
}
::v-deep .el-alert{
  border: 1p solid #91D5FF;
  background-color: #E6F7FF;
}

::v-deep .border-style .el-textarea__inner{
  border: none;
}
::v-deep .el-textarea__inner{
  min-height: 100px !important;
}
</style>